<template>
  <view class="merchantlist">
    <view class="search"
      ><image :src="search" /><input
        type="text"
        confirm-type="search"
        v-model="searchValue"
        placeholder=""
        @confirm="onFastSearch(searchValue)"
    /></view>
    <!-- v-for="item in "   :value="searchValue"
        :confirm="  onFastSearch"-->
    <view class="fastSearch">
      <view
        v-for="item in fastlist"
        :key="item.id"
        @tap="() => onFastSearch(item.value)"
        class="text"
        >{{ item.value }}</view
      >
    </view>
    <!-- <view class="culture-swiper">
      <BannerSwiper :List="list" />
    </view> -->  
    <!-- @tap="current = item._id"   -->
    <view class="content">
      <view class="around-tab">
        <view
          v-for="item in menulist"
          :key="item._id"
          :class="`around-tab__item ${current == item._id ? 'active' : ''}`"
          @tap="select_shopping_district_id(item)"
          ><text>{{ item.name }}</text
          ><view v-show="current == item._id" class="line" />
        </view>
      </view>
      <view>
        <image v-if="show_banner" :src="image(shopping_district_face_image_id)" alt="" srcset="" :class="` ${show_banner ? 'culture-swiper' : ''}`" />
      </view>
      <view class="card-list">
        <merchants_card
          v-for="(item, index) in datalist"
          :key="index"
          class="card"
          :data="item"
        />
      </view>
      <view v-if="morebtn" class="more" @tap="loadMore">加载更多...</view>
    </view>
  </view>
</template>

<script>
import "./index.scss";
import Taro, { Component } from "@tarojs/taro";
import img1 from "../../assets/image/build1.png";
import search from "../../assets/icon/search.png";
import BannerSwiper from "../../components/bannerswiper/index";
import merchantsCard from "../../components/merchantsCard/index";
import request from "../../utils/request";
import {getImage} from "../../utils/request"

// import Taro from "@tarojs/taro";search
export default {
  components: {
    // BannerSwiper: BannerSwiper,
    merchants_card: merchantsCard,
  },
  data() {
    return {
      shopping_district_face_image_id: "",
      show_banner: false,
      searchValue: "",
      search: search,
      morebtn: true,
      msg: "Hello33333 world!",
      list: [{ image: img1 }, { image: img1 }, { image: img1 }],
      query: {
        q_shopping_district_id: "",
      },
      page: {
        row_limit: 10,
        p: 1,
      },
      current: "",
      menulist: [{ _id: "", name: "全部" }],
      fastlist: [
        {
          id: 0,
          value: "KFC",
        },
        {
          id: 1,
          value: "33",
        },
        {
          id: 2,
          value: "444",
        },
      ],
      datalist: [],
    };
  },

  computed: {
    // 计算属性的 getter
    // current: function () {
    //   return getShoppingList();
    // },
  },
  watch: {
    current: function (newcurrent, oldcurrent) {
      console.log("3322");
      this.datalist = [];
      this.page = {
        row_limit: 10,
        p: 1,
      };
      this.getShoppingList({
        row_limit: 10,
        p: 1,
        q_shopping_district_id: newcurrent,
      });
    },
    searchValue: function (newsearchValue, oldsearchValue) {
      console.log(newsearchValue,"333");
      
    },
  },
  created() {
    console.log('66666')
    this.getDistrict();
    this.getShoppingList(this.page);
  },

  methods: {

    select_shopping_district_id(item)
    {
      this.current = item._id;
      if("" == item._id)
        this.show_banner = false;
      else{
        this.show_banner = true;
        this.shopping_district_face_image_id = item.face_image_id;
      }
    },
    image(id){
      return getImage(id)
    },

    onFastSearch(value) {
      console.log(value, "value");
      this.datalist = [];
      this.page = {
        row_limit: 10,
        p: 1,
      };
      this.searchValue = value;
      this.getShoppingList({ row_limit: 10, p: 1, q_name: value });
    },

    getDistrict() {
      request("get", "/api/rest/shopping_districts.htm").then((res) => {
        console.log(res, "getDistrict");
        this.menulist = [...this.menulist, ...res._list];

        // this.current = res._list[0]._id;
      });
    },
    getShoppingList(params) {
      console.log(params);
      request("get", "/api/rest/businesses.htm", {
         q_name: this.searchValue,
        ...params,
       
      }).then((res) => {
        console.log(res._list, "ShoppingList");
        // this.menulist = res._list
        this.datalist = [...this.datalist, ...res._list];
        if (res._page.page_count <= res._page.page_current)
          this.morebtn = false;
        // _id title face_image_id
      });
    },

    loadMore() {
      console.log(this.searchValue);
      this.getShoppingList({
        p: ++this.page.p,
        row_limit: 10,
        q_shopping_district_id: this.current,
      });
    },
  },
};
</script>
<style>
  .image {
      width: 100%;
      height: 100%;
  }
</style>

